<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>DeathBot Control System</title>
  
  
  
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  
  <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="codiqa.ext.css">
  
  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
  <script src="/socket.io/socket.io.js"></script>

    <!-- Code for socket.io and device orientation handling -->
  <script>
    var socket = io.connect();
    // Send data through socket
    function throttle(value){
      socket.emit('throttle', value);
    }
    function LeftRight(value){
      socket.emit('LeftRight', value);
    }
    function Reverse(sel){
        if (sel.value == "on") {
            socket.emit('Reverse', sel.value);
        } else if (sel.value == "off") {
            socket.emit('Reverse', sel.value);
        }
    }
    function SuperSpeed(sel){
        if (sel.value == "on") {
            socket.emit('SuperSpeed', sel.value);
        } else if (sel.value == "off") {
            socket.emit('SuperSpeed', sel.value);
        }
    }
    function Claw(sel){
        if (sel.value == "on") {
            socket.emit('Claw', sel.value);
        } else if (sel.value == "off") {
            socket.emit('Claw', sel.value);
        }
    }
    function Light(sel){
        if (sel.value == "on") {
            socket.emit('Light', sel.value);
        } else if (sel.value == "off") {
            socket.emit('Light', sel.value);
        }
    }
    function RobotPower(sel){
        if (sel.value == "on") {
            socket.emit('RobotPower', sel.value);
        } else if (sel.value == "off") {
            socket.emit('RobotPower', sel.value);
        }
    }
    function CameraPower(sel){
        if (sel.value == "on") {
            socket.emit('CameraPower', sel.value);
        } else if (sel.value == "off") {
            socket.emit('CameraPower', sel.value);
        }
    }
    function FF2(){
	    socket.emit('Reverse', 'off');
        socket.emit('RobotPower', 'on');
		setTimeout(DelayStopRP,1000);
    }
	function DelayStopRP(){
        socket.emit('RobotPower', 'off');
    }
	function DelayStopRR(){
	    socket.emit('Reverse', 'off');
    }
    function DelayStopSS(){
		socket.emit('SuperSpeed', 'off');
    }
    function DelayStopLR(){
	    socket.emit('LeftRight', '0');
    }
    function LL2(){
	    socket.emit('Reverse', 'off');
		socket.emit('SuperSpeed', 'off');
        socket.emit('LeftRight', '-100');
		socket.emit('RobotPower', 'on');
		setTimeout(DelayStopRP,1000);
		setTimeout(DelayStopRR,1100);
		setTimeout(DelayStopSS,1200);
		setTimeout(DelayStopLR,1300);
    }
    function SPL(){
	    socket.emit('SPL', '1');
		setTimeout(DelayStopSPL,700);
    }
    function DelayStopSPL(){
	    socket.emit('SPL', '0');
    }
    function RR2(){
	    socket.emit('Reverse', 'off');
		socket.emit('SuperSpeed', 'off');
        socket.emit('LeftRight', '100');
		socket.emit('RobotPower', 'on');
		setTimeout(DelayStopRP,1000);
		setTimeout(DelayStopRR,1100);
		setTimeout(DelayStopSS,1200);
		setTimeout(DelayStopLR,1300);
    }
    function SPR(){
	    socket.emit('SPR', '1');
		setTimeout(DelayStopSPR,700);
    }
    function DelayStopSPR(){
	    socket.emit('SPR', '0');
    }
    function BB2(){
	    socket.emit('Reverse', 'on');
		socket.emit('SuperSpeed', 'off');
		socket.emit('RobotPower', 'on')
		setTimeout(DelayStopRP,1000);
		setTimeout(DelayStopRR,1100);
		setTimeout(DelayStopSS,1200);
    }
	function ledRed(value){
      socket.emit('ledRed', value);
    }
    function ledGreen(value){
      socket.emit('ledGreen', value);
    }
    function ledBlue(value){
      socket.emit('ledBlue', value);
    }
    function Demo(value){
      socket.emit('demo', value);
    }      
    // Take actions based on device orientation (works on mobile devices only)
    if (window.DeviceOrientationEvent) {
        // Listen for the deviceorientation event and handle the raw data
        window.addEventListener('deviceorientation', function(eventData) {
          // gamma is the left-to-right tilt in degrees, where right is positive
          var tiltLR = eventData.gamma;
          // beta is the front-to-back tilt in degrees, where front is positive
          var tiltFB = eventData.beta;
          // call orientation event handler
          if (Gyro.value == 'on'){
            deviceOrientationHandler(tiltLR, tiltFB);
          }
        }, false);
    }
    else {
        console.log("DeviceOrientation is NOT supported");
        }
    
    function deviceOrientationHandler(LeftRight, FrontBack){
        // normalize and limit values between 0 and 100
        LeftRight = Math.min(Math.max(Math.round(LeftRight), -100), 100);
        FrontBack = Math.min(Math.max(Math.round(FrontBack), -100), 100);
        //LeftRight = Math.round((LeftRight/180)*100);
        //FrontBack = Math.round((LeftRight/180)*50);
        
        if (LeftRight >= 0) {
            ledGreen(LeftRight);
            ledRed(0);
        } 
        if (LeftRight <= 0) {
            ledRed(Math.abs(LeftRight));
            ledGreen(0);
        }
        if (FrontBack <= 0) {
            ledBlue(Math.abs(FrontBack));
        }
        if (FrontBack > 0) {
            ledBlue(0);
        }
    }
        
    function demoSwitch(sel){
        if (sel.value == "on") {
            $("#Gyro").val('off').slider('refresh').slider('disable');
            $("#slider1").val('0').slider('refresh').slider('disable');
            $("#slider2").val('0').slider('refresh').slider('disable');
            $("#slider3").val('0').slider('refresh').slider('disable');
            socket.emit('demo', sel.value);
        } else if (sel.value == "off") {
            socket.emit('demo', sel.value);
            $('#Gyro').slider('enable');
            $("#slider1").slider('enable');
            $("#slider2").slider('enable');
            $("#slider3").slider('enable');
        }
    }
 
    function gyroSwitch(sel){
        if (sel.value == "on") {
            $("#Demo").val('off').slider('refresh').slider('disable');
            $("#slider1").val('0').slider('refresh').slider('disable');
            $("#slider2").val('0').slider('refresh').slider('disable');
            $("#slider3").val('0').slider('refresh').slider('disable');
        } else if (sel.value == "off") {
            $('#Demo').slider('enable');
            $("#slider1").slider('enable');
            $("#slider2").slider('enable');
            $("#slider3").slider('enable');
        }
    }
  </script>

</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            DeathBot
        </h3>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="Throttle">
                Throttle
            </label>
            <input id="Throttle" type="range" name="slider" value="0" min="0" max="100" data-highlight="true" onChange="throttle(value);">
        </div>
        <div data-role="fieldcontain">
            <label for="LeftRight">
                Left / Right
            </label>
            <input id="LeftRight" type="range" name="slider" value="0" min="-100" max="100" data-highlight="false" onChange="LeftRight(value);">
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div data-role="fieldcontain">
                    <label for="toggleswitch7">
                        Reverse
                    </label>
                    <select name="toggleswitch7" id="toggleswitch7" data-theme="" data-role="slider" onchange="Reverse(this);">
                        <option value="off">
                            Fwd
                        </option>
                        <option value="on">
                            Rev
                        </option>
                    </select>
                </div>
            </div>
            <div class="ui-block-b">
                <div data-role="fieldcontain">
                    <label for="toggleswitch8">
                        Super Speed
                    </label>
                    <select name="toggleswitch8" id="toggleswitch8" data-theme="" data-role="slider" onchange="SuperSpeed(this);">
                        <option value="off">
                            Off
                        </option>
                        <option value="on">
                            On
                        </option>
                    </select>
                </div>
            </div>
            <div class="ui-block-a">
                <div data-role="fieldcontain">
                    <label for="toggleswitch9">
                        Claw
                    </label>
                    <select name="toggleswitch9" id="toggleswitch9" data-theme="" data-role="slider" onchange="Claw(this);">
                        <option value="off">
                            Closed
                        </option>
                        <option value="on">
                            Opened
                        </option>
                    </select>
                </div>
            </div>
            <div class="ui-block-b">
                <div data-role="fieldcontain">
                    <label for="toggleswitch10">
                        Light
                    </label>
                    <select name="toggleswitch10" id="toggleswitch10" data-theme="" data-role="slider" onchange="Light(this);">
                        <option value="off">
                            Off
                        </option>
                        <option value="on">
                            On
                        </option>
                    </select>
                </div>
            </div>
            <div class="ui-block-a">
                <div data-role="fieldcontain">
                    <label for="toggleswitch11">
                        Robot Power
                    </label>
                    <select name="toggleswitch11" id="toggleswitch11" data-theme="b" data-role="slider" onchange="RobotPower(this);">
                        <option value="off">
                            Off
                        </option>
                        <option value="on">
                            On
                        </option>
                    </select>
                </div>
            </div>
            <div class="ui-block-b">
                <div data-role="fieldcontain">
                    <label for="toggleswitch12">
                        Camera Power
                    </label>
                    <select name="toggleswitch12" id="toggleswitch12" data-theme="b" data-role="slider" onchange="CameraPower(this);">
                        <option value="off">
                            Off
                        </option>
                        <option value="on">
                            On
                        </option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div data-role="content">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <a id="LL2" data-role="button" data-transition="pop" data-theme="b" onclick="LL2(); return false"
                data-icon="arrow-l" data-iconpos="left">
                    Left
                </a>
                <a id="SPL" data-role="button" data-transition="pop" data-theme="b" onclick="SPL(); return false"
                data-icon="arrow-d" data-iconpos="bottom">
                    Spin Left
                </a>
            </div>
            <div class="ui-block-b">
                <a id="FF2" data-role="button" data-transition="pop" data-theme="b" onclick="FF2(); return false"
                data-icon="arrow-u" data-iconpos="top">
                    Fwd
                </a>
                <a id="BB2" data-role="button" data-transition="pop" data-theme="b" onclick="BB2(); return false"
                data-icon="arrow-d" data-iconpos="bottom">
                    Back
                </a>
            </div>
            <div class="ui-block-c">
                <a id="RR2" data-role="button" data-transition="pop" data-theme="b" onclick="RR2(); return false"
                data-icon="arrow-r" data-iconpos="right">
                    Right
                </a>
                <a id="SPR" data-role="button" data-transition="pop" data-theme="b" onclick="SPR(); return false"
                data-icon="arrow-d" data-iconpos="bottom">
                    Spin Right
                </a>
            </div>
        </div>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="slider1">
                Red LED
            </label>
            <input id="slider1" type="range" name="slider" value="0" min="0" max="100"
            data-highlight="false" data-theme="b" onChange="ledRed(value);">
        </div>
        <div data-role="fieldcontain">
            <label for="slider2">
                Blue LED
            </label>
            <input id="slider2" type="range" name="slider" value="0" min="0" max="100"
            data-highlight="false" data-theme="b" onChange="ledBlue(value);">
        </div>
        <div data-role="fieldcontain">
            <label for="slider3">
                Green LED
            </label>
            <input id="slider3" type="range" name="slider" value="0" min="0" max="100"
            data-highlight="false" data-theme="b" onChange="ledGreen(value);">
        </div>
        <div data-role="fieldcontain">
            <label for="Demo">
                Demo Mode
            </label>
            <select name="toggleswitch1" id="Demo" data-theme="b" data-role="slider" onchange="demoSwitch(this);">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="Gyro">
                Gyroscope
            </label>
            <select name="toggleswitch2" id="Gyro" data-theme="b" data-role="slider" onchange="gyroSwitch(this);">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
        <span class="ui-title">
        </span>
    </div>
</div>
</body>
</html>